<template>
	<view class="details pd-30">
		<view class="card3 mt-10 pd-20">
			<view class="second pd-20">
				<view class="flex-bwt" style="border-bottom: 2rpx solid #f1f1f1; padding-bottom: 20rpx">
					<view class="left ft">
						<view class="one">{{ shareInfo.tag_name }}</view>
						<view class="ft1 mt-24 ft-28">{{ shareInfo.name }}</view>
						<view class="mt-12">{{ "最近访问时间："+shareInfo.created_at }}</view>
					</view>
					<view class="right">
						<image class="wh-100 bd-r40" mode="aspectFill"
							:src="shareInfo.cover"></image>
						<image class="wh-36 tubiao" src="https://cdn.oss.bon-top.cn/static_bc/images/paly_m.png" v-if="shareInfo.video_id>0"></image>
					</view>
				</view>
				<view class="flex-bwt mt-12">
					<view class="word">
						<text class="ft">访问次数：</text>
						<text class="ft c-bbq">{{shareInfo.pv_num}}次</text>
						<text class="ft ml-8 mr-8">|</text>
						<text class="ft">访问人数：</text>
						<text class="ft c-bbq">{{shareInfo.user_num}}人</text>
					</view>
					<view class="picture flex">
						<image class="wh-48 img bd-r50c" :src="v" mode="aspectFill" style="margin-left: -24rpx;" v-for="(v,i) in shareInfo.user_imgs" :key="i"></image>
					</view>
				</view>
			</view>
			<view class="btn2 flex-center" @click="goContentDetail(shareInfo)">
				<text class="ft c-33">查看分享内容</text>
				<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
			</view>
		</view>
		<view class="history ft flex-center mt-30">
			访问记录
		</view>
		<view class="list mt-20" v-for="(item, index) in msgList" :key="index">
			<view class="ft flex-center c-99">{{ item.created_at }}</view>
			<view class="card3 mt-12 pd-20">
				<view class="first pd-20">
					<view class="flex" style="align-items: flex-start;">
						<image style="border-radius: 50%;flex-shrink: 0;" class="wh-68 mr-20"
							:src="item.user_info.avatar"></image>
						<view>
							<view class="flex" style="align-items: flex-start;">
								<view class="ft1" style="word-break: break-all;">{{ item.user_info.nickname }}</view>
								<view class="flex hots">
									<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/fire.png">
									</image>
									<view class="ft ft-20">热度{{ item.user_info.pv_num }}</view>
								</view>
							</view>
							<view class="ft mt-10">访问次数：<text class="c-66">{{ item.user_info.pv_num }}次</text></view>
						</view>
					</view>
					<view class="ft mt-10 ml-90">最近访问：<text class="c-66">{{ item.user_info.product_name }}</text></view>
					<view class="ft c-99 mt-12 ml-90">{{ '时间：'+item.created_at+' | 时长：'+item.user_info.seconds_txt }}
					</view>
				</view>
				<view class="btn2 flex-center" @click="goDetail(item.user_id)">
					<text class="ft c-33">访问明细</text>
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		utils
	} from "@/utils/utils.js";
	import {
		api
	} from "@/utils/api.js";

	//获取消息列表
	const msgPage = ref(1)
	const msgList = ref([])
	const msgLoading = ref(true)
	const getMsgListData = () => {
		if (!msgLoading.value) {
			return
		}
		uni.showLoading()
		msgLoading.value = false
		utils
			.request(
				api.shareDetail, {
					page: msgPage.value,
					pageSize: 10,
					pid: pid.value,
				},
				"get"
			)
			.then((res) => {
				const resData = res.data.data
				if (isInit.value == 1) {
					shareInfo.value = resData.share_info
					isInit.value = 0
				}
				msgPage.value++
				if (resData.items.length > 0) {
					msgList.value = msgList.value.concat(resData.items)
				}
				if (msgPage.value <= resData.pageInfo.totalPage) {
					msgLoading.value = true
				}
				uni.hideLoading()
			});
	};
	onReachBottom(() => {
		getMsgListData()
	})
	const pid = ref('')
	const shareInfo = ref({})
	const isInit = ref(1)
	onLoad((options) => {
		pid.value = options.pid ? options.pid : ''
		getMsgListData()
	})

	const goDetail = (user_id) => {
		uni.navigateTo({
			url: '/subpackage/message/accessHistroy?user_id='+user_id
		})
	}
	
	const goContentDetail = (info)=>{
		if(info.product_id>0){
			//跳转到产品详情
			uni.navigateTo({
				url: `/subpackage/immigration/immigration?id=${info.product_id}`,
			});
		}else if(info.video_id>0){
			//跳转到视频详情
			uni.navigateTo({
				url: `/pages/category/category?id=${info.video_id}&isReback=${true}`,
			});
		}else if(info.sale_id>0){
			//跳转到老师详情
			uni.navigateTo({
				url: `/subpackage/teacher/teacherDetail?id=${info.sale_id}`,
			});
		}else if(info.case_id>0){
			//跳转到案例详情
			uni.navigateTo({
				url: `/subpackage/clinch/clinchDetail?id=${info.case_id}`,
			});
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100%;
		overflow-x: hidden;
	}


	.card3 {
		width: 690rpx;
		// height: 372rpx;
		background: #f8f8f8;
		border-radius: 40rpx;

		.first {
			width: 650rpx;
			background: #ffffff;
			border-radius: 40rpx;
			.hots{
				height: 36rpx;				
				background: linear-gradient( 180deg, #FFF3EC 0%, #FFFFFF 100%);
				border-radius: 8rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				flex-shrink: 0;
				margin-left: 4rpx;
			}
		}

		.second {
			width: 650rpx;
			// height: 258rpx;
			background: #ffffff;
			border-radius: 40rpx;

			.left {
				flex: 1;

				.one {
					width: 48rpx;
					height: 36rpx;
					background: #333333;
					border-radius: 8rpx;
					color: #fff;
					text-align: center;
					line-height: 36rpx;
				}
			}

			.right {
				width: 116rpx;
				height: 146rpx;
				background: #ffffff;
				border-radius: 40rpx;
				position: relative;
				.tubiao {
					z-index: 3;
					position: absolute;
					left: 12rpx;
					top: 12rpx;
				}
			}
		}
	}

	.btn2 {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}

	.history {
		width: 152rpx;
		height: 72rpx;
		background: #DBF046;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>